import { onMounted, ref, Ref, watch } from "@vue/composition-api";
import { Message } from "element-ui";
import {
  batchAddPermsToRole,
  batchDelPermsToRole,
  getRoleNoPopdomList,
  getRolePopdomList
} from "@/api/system-manage/role-permission";
import { OperationType, recordOperateLogFunc } from "@/api/log";

const recordOperateLog: Function = recordOperateLogFunc(
  "系统管理",
  "角色管理",
  "分配权限"
);

export function usePermList(data: Ref) {
  // 未分配的权限
  const noPopPermData = ref([]);
  // 已经分配的权限
  const popPermData = ref([]);

  // 未分配的权限
  const noPopPermList = ref([]);
  // 已经分配的权限
  const popPermList = ref([]);

  // 选中准备添加权限的列表
  const addSelectionList = ref([]);
  // 选中准备移除权限的列表
  const removeSelectionList = ref([]);

  // 两个列表的搜索关键词
  const noPopPermKeyword = ref("");
  const popPermKeyword = ref("");

  const noPopPermLoad = ref(true);
  const popPermLoad = ref(true);

  onMounted(refreshPermList);
  watch(data, refreshPermList);

  /**
   * 监听关键词的变化过滤列表
   */
  watch(noPopPermKeyword, async () => {
    if (noPopPermKeyword.value.length !== 0) {
      noPopPermList.value = noPopPermData.value.filter(
        t =>
          t.popdomname.includes(noPopPermKeyword.value) ||
          t.menuname.includes(noPopPermKeyword.value)
      );
    } else {
      noPopPermList.value = noPopPermData.value;
    }
  });

  watch(popPermKeyword, async () => {
    if (popPermKeyword.value.length !== 0) {
      popPermList.value = popPermData.value.filter(
        t =>
          t.popdomname.includes(popPermKeyword.value) ||
          t.menuname.includes(popPermKeyword.value)
      );
    } else {
      popPermList.value = popPermData.value;
    }
  });

  async function refreshPermList() {
    noPopPermLoad.value = true;
    popPermLoad.value = true;

    noPopPermKeyword.value = "";
    popPermKeyword.value = "";

    getRoleNoPopdomList(data.value.id).then(detail => {
      noPopPermData.value = detail;
      noPopPermList.value = detail;
      noPopPermLoad.value = false;
    });

    const detail = await getRolePopdomList(data.value.id);
    popPermData.value = detail;
    popPermList.value = detail;
    popPermLoad.value = false;
    recordOperateLog(OperationType.Select);
  }

  function handleChangeAddSelected(list: []) {
    addSelectionList.value = list;
  }

  function handleChangeRemoveSelected(list: []) {
    removeSelectionList.value = list;
  }

  async function handleAddPerms() {
    if (addSelectionList.value.length === 0) {
      return;
    }

    noPopPermLoad.value = true;
    const rid = data.value.id;
    const pids: string[] = addSelectionList.value.map(t => t.id);
    // 清空, 防止二次点击
    addSelectionList.value = [];

    const detail = await batchAddPermsToRole(rid, pids);
    recordOperateLog(OperationType.MallocPermission);
    if (detail) {
      refreshPermList();
      Message.success(detail as string);
    }
  }

  async function handleRemovePerms() {
    if (removeSelectionList.value.length === 0) {
      return;
    }

    popPermLoad.value = true;
    const rid = data.value.id;
    const pids: string[] = removeSelectionList.value.map(t => t.id);
    removeSelectionList.value = [];

    const detail = await batchDelPermsToRole(rid, pids);
    recordOperateLog(OperationType.MallocPermission);
    if (detail) {
      refreshPermList();
      Message.success(detail as string);
    }
  }

  return {
    noPopPermList,
    popPermList,

    noPopPermLoad,
    popPermLoad,

    noPopPermKeyword,
    popPermKeyword,

    handleChangeAddSelected,
    handleChangeRemoveSelected,
    handleAddPerms,
    handleRemovePerms
  };
}
